<template>
  <div>
    <div class="index-center">
      <center />
    </div>
    <div class="index-left">
      <left />
    </div>
    <div class="index-right">
      <right />
    </div>
  </div>
</template>

<script setup>
import left from "./left/index.vue";
import right from "./right/index.vue";
import center from "./center/index.vue";


</script>

<style scoped>
.index-center {
  width: calc(100% - 52.91667vw);
  left: 26.458333vw;
  height: calc(100vh - 7.60417vw);
  position: absolute;
  top: 0;
}

.index-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 23.854167vw;
  padding-left: 1.5625vw;
  height: calc(100vh - 7.60417vw);
  background: rgba(0, 18, 32, 0.65);
}

.index-right {
  display: flex;
  flex-direction: column;
  width: 23.854167vw;
  height: calc(100vh - 7.60417vw);
  padding-right: 1.5625vw;
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0, 18, 32, 0.65);
}

.index-left .content,
.index-right .content {
  width: 100%;
}
</style>
